<template>
    <view class="container">
        <view class="custom-top" :style="{ paddingTop: `${statusBarHeight}px` }">
            <view class="fs-36 pt-20 pl-20"> 康复训练助手 </view>
            <view class="search-wrapper" @click="navigateToPlan">
                <uni-search-bar
                    class="uni-mt-10"
                    radius="100"
                    placeholder="搜索训练项目"
                    clearButton="none"
                    cancelButton="none"
                />
            </view>
        </view>

        <view class="banner-list" :style="`margin-top:calc(180rpx + ${statusBarHeight}px)`">
            <uni-swiper-dot mode="default" :info="banners" :current="current">
                <swiper
                    class="swiper-box"
                    autoplay="true"
                    interval="5000"
                    circular="true"
                    @change="change"
                    :style="{ height: swiperHeight + 'px' }"
                >
                    <swiper-item v-for="(item, index) in banners" :key="index">
                        <view class="swiper-item">
                            <image
                                :src="item.image_src"
                                mode="widthFix"
                                @load="onImageLoad"
                                :data-index="index"
                            />
                        </view>
                    </swiper-item>
                </swiper>
            </uni-swiper-dot>
        </view>

        <view class="f f-bt p20">
            <view
                v-for="(item, index) in features"
                :key="index"
                class="f-col f-ai-c"
                @click="featuresJump(item.path)"
            >
                <view class="features-item">
                    <image :src="item.iconUrl" mode="aspectFill" />
                </view>
                <text class="line1 fs-24 features-font">{{ item.title }}</text>
            </view>
        </view>

        <view class="p20">
            <view class="f f-bt">
                <view class="fs-32 fw-b">推荐训练视频</view>
                <navigator hover-class="none" open-type="switchTab" url="/pages/plan/plan">
                    <text class="fs-26 recommend-more">更多</text>
                </navigator>
            </view>
            <view class="f f-bt f-wrap">
                <view
                    v-for="(video, index) in videos"
                    :key="index"
                    class="f-col mt-20 video-item"
                    @click="videoJump(video.video_id)"
                >
                    <view class="mb-10 video-thumb">
                        <image :src="video.video_thumb" mode="aspectFill" />
                    </view>
                    <view class="text-sm mb-1">{{ video.video_title }}</view>
                    <view class="text-xs px-2 py-1 bg-emerald-50 text-emerald-500 rounded-full">{{
                        video.level_title
                    }}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { getRecommendList, getImagesList } from '@/api/modules/common';
export default {
    data() {
        return {
            banners: [],
            current: 0,
            swiperHeight: 200, // 默认高度
            imageHeights: [], // 存储每张图片的高度
            containerWidth: 0, // 容器宽度
            features: [
                {
                    title: '关于我们',
                    iconUrl:
                        'https://thaliemption.logs.fund/upload/config/20250917/8ecc469e2294bf3f4b58530aff35540b.jpg',
                    path: '/pages/aboutus/aboutus'
                },
                {
                    title: '我的计划',
                    iconUrl:
                        'https://ai-public.mastergo.com/ai/img_res/1051043f90f1bafa7217f7883bccdd83.jpg',
                    path: '/pages/daily-plan/daily-plan'
                },
                {
                    title: '训练记录',
                    iconUrl:
                        'https://ai-public.mastergo.com/ai/img_res/d1b3d3edd5b90426e1efc1f2d7e1b47f.jpg',
                    path: '/pages/record/record'
                },
                {
                    title: '健康资讯',
                    iconUrl:
                        'https://ai-public.mastergo.com/ai/img_res/01c89a1490b2fb9a10b7424a50d6e5a0.jpg',
                    path: '/pages/news/news'
                }
            ],
            videos: [],
            statusBarHeight: uni.getSystemInfoSync().statusBarHeight
        };
    },
    onLoad() {
        this.getImagesList();
        this.getRecommendList();
    },
    onReady() {
        // 获取容器宽度 - 在页面渲染完成后调用
        this.getContainerWidth();
    },
    methods: {
        async getImagesList() {
            const { data } = await getImagesList({ category_id: 1 });
            this.banners = data;
            // 初始化图片高度数组
            this.imageHeights = new Array(data.length).fill(this.swiperHeight);
        },
        async getRecommendList() {
            const { data } = await getRecommendList();
            this.videos = data;
        },
        // 获取容器宽度
        getContainerWidth() {
            const query = uni.createSelectorQuery().in(this);
            query.select('.banner-list').boundingClientRect();
            query.exec(res => {
                if (res && res[0]) {
                    this.containerWidth = res[0].width;
                }
            });
        },
        change(e) {
            this.current = e.detail.current;
            // 切换图片时更新轮播图高度
            if (this.imageHeights[e.detail.current]) {
                this.swiperHeight = this.imageHeights[e.detail.current];
            }
        },
        // 图片加载完成事件
        onImageLoad(e) {
            const index = e.currentTarget.dataset.index;
            const width = e.detail.width;
            const height = e.detail.height;

            // 确保容器宽度已获取
            if (this.containerWidth > 0) {
                // 计算实际高度
                const actualHeight = (height * this.containerWidth) / width;

                // 更新对应图片的高度
                this.$set(this.imageHeights, index, actualHeight);

                // 如果是当前显示的图片，更新轮播图高度
                if (index === this.current) {
                    this.swiperHeight = actualHeight;
                }
            } else {
                // 如果容器宽度还未获取，重新获取
                this.getContainerWidth();
                // 延迟重新计算高度
                setTimeout(() => {
                    if (this.containerWidth > 0) {
                        const actualHeight = (height * this.containerWidth) / width;
                        this.$set(this.imageHeights, index, actualHeight);
                        if (index === this.current) {
                            this.swiperHeight = actualHeight;
                        }
                    }
                }, 100);
            }
        },
        featuresJump(path) {
            if (path == '') return;
            uni.navigateTo({
                url: path
            });
        },
        videoJump(video_id) {
            uni.navigateTo({ url: `/pages/video/video-play?video_id=${video_id}` });
        },
        navigateToPlan() {
            uni.switchTab({
                url: '/pages/plan/plan'
            });
        }
    }
};
</script>

<style lang="scss">
.container {
    padding: 40rpx 20rpx;
    font-size: 14px;
    line-height: 24px;
    padding-top: 0;
}

.custom-top {
    position: fixed;
    width: calc(100% - 40rpx);
    z-index: 9;
    background: #fff;
    top: 0;

    .uni-searchbar {
        padding: 20rpx 0;
    }

    .search-wrapper {
        position: relative;
        z-index: 10;
        &::after {
            content: '';
            display: block;
            position: absolute;
            inset: 0;
        }
    }
}

.banner-list {
    margin-top: 220rpx;
    .swiper-box {
        .swiper-item {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: #fff;
            border-radius: 20rpx;

            image {
                width: 100%;
                border-radius: 20rpx;
                overflow: hidden;
            }
        }
    }
}

.features-item {
    width: 100rpx;
    height: 100rpx;

    image {
        width: 100%;
        height: 100%;
        border-radius: 10rpx;
    }
}

.features-font {
    color: rgb(75, 85, 99);
}

.recommend-more {
    color: rgb(16, 185, 129);
}

.video-item {
    width: 48%;

    .video-thumb {
        border-radius: 15rpx;

        image {
            width: 100%;
            height: 200rpx;
            border-radius: 15rpx;
        }
    }
}
</style>
